{include file="header/index" /}
<style>
	.operation table th,.operation table td{
		text-align: left !important;
	}
</style>
<div class="container whitebg">
			<div class="topnav clearfix">
				<div class="title fl">
					<h3>合同详情</h3>
					<a href="#information">基本信息</a>
					<a href="#operation" class="ac">合同信息</a>
					<a href="#enclosure">附件信息</a>
					<a href="#equipment">设备信息</a>
					<a href="#operation_record">合同修改记录</a>
				</div>
				<div class="backbtnwrap fr">
					<button type="button" class="btn backbtn" onclick="backurl(this)">返回</button>
				</div>
			</div>

			<!--基本信息-->
			<div class="information" id="information">
				<p class="title">基本信息</p>
				<table class="table table-bordered order_details_table">
					<tr>
						<th>姓名</th>
						<td>{$data.username}</td>
						<th>联系电话</th>
						<td>{$data.telphone}</td>
					</tr>
					<tr>
						<th>创建时间</th>
						<td>{$data.add_time}</td>
						<th>账号状态</th>
						<td class="redcolor" style="width: 70%">{$data.user_type}&nbsp;&nbsp;&nbsp;&nbsp;状态：{$data.account_status}
							{if condition="($data.remark)"}
							&nbsp;&nbsp;&nbsp;备注：{$data.remark}
							{/if}

						</td>
					</tr>
					<tr>
						<th>生日</th>
						<td>{$data.birthday}</td>
						<th>业务申请人</th>
						<td>{$data.applicant}&nbsp;&nbsp;&nbsp;&nbsp;{$data.applicant_number}</td>
					</tr>
					<tr>
						<th>用户地址</th>
						<td colspan="3">{$data.province}{$data.city}{$data.area}{$data.user_address}</td>
					</tr>
                    <tr>
                        <th>合同地址</th>
                        <td colspan="3">{$data.ht_province}{$data.ht_city}{$data.ht_area}{$data.address}</td>
                    </tr>
				</table>
			</div>

			<!--合同信息-->
			<div class="operation" id="operation">
				<p class="title">合同信息</p>
				<table class="table table-bordered">
					<tr>
						<th>合同编号</th>
						<td>{$data.contract_no}</td>
						<th>转介绍人</th>
						<td>{$data.introducer_id}</td>
					</tr>
					<tr>
						<th>合同金额</th>
						<td>{$data.contract_money}元&nbsp;&nbsp;&nbsp;&nbsp;服务费用：{$data.for_core_cost}元</td>
						<th>客户性质</th>
						<td>{$data.contract_type}-{$data.nature}-{$data.username}</td>
					</tr>
					<tr>
						<th>收据编号</th>
						<td>No.{$data.receipt}</td>
						<th>水压值</th>
						<td>{$data.water_pressure}MPa</td>
					</tr>
					<tr>
						<th>原始配件</th>
						<td>
							{volist name="$data.original_parts" id="original_parts"  offset="0" length='1'}
							配件名称：{$original_parts.parts_name} ; 配件数量：{$original_parts.parts_number}
							{/volist}
							{if condition="(count($data.original_parts) > 1)"}
							<button id="devicedetails" type="button" onmouseover="mouseshow(this)" onmouseout="mousehide(this)">●●●</button>
							<div class="frame" style="width: 200px;">
								<span class="triangle"></span>
								{volist name="$data.original_parts" id="original_parts"  offset="1"}
								配件名称：{$original_parts.parts_name} ; 配件数量：{$original_parts.parts_number}<br>
								{/volist}
							</div>
							{/if}
						</td>
						<th>安装时间</th>
						<td>{$data.installed_time}</td>
					</tr>
					<tr>
						<th>最近一次换芯时间</th>
						<td>{$data.recent_time}</td>
						<th>设备台数</th>
						<td>{$data.EquipmentNumber}台</td>
					</tr>
					<tr>
						<th>换芯周期</th>
						<td>{$data.for_core_cycle}个月</td>
						<th>换芯时间</th>
						<td class="redcolor">{$data.for_core_time}</td>
					</tr>
					<tr>
						<th>住屋性质</th>
						<td>{$data.housing_property}</td>
						<th>免费移机次数</th>
						<td>{$data.moving_machine_number}次</td>
					</tr>
					<tr>
						<th>到期时间</th>
						<td class="redcolor">{$data.exire_date}</td>
						<th>免费换芯次数</th>
						<td>{$data.for_core_number}次</td>
					</tr>
					{if condition="(!empty($data.personnel_number))"}
					<tr>
						<th>员工编号</th>
						<td>{$data.personnel_number}</td>
						<th>是否入职</th>
						<td>{$data.is_entry}</td>
					</tr>
					{/if}
					{if condition="(!empty($data.corporate_name))"}
					<tr>
						<th>公司名称</th>
						<td colspan="3">{$data.corporate_name}</td>
					</tr>
					{/if}
					<tr>
						<th>备注</th>
						<td colspan="3" style="width: 85%;">{$data.contract_remark}</td>
					</tr>
				</table>
			</div>

			<!--附件信息-->
			<div class="enclosure clearfix" id="enclosure">
				<p class="title" onclick="hideenclosurelist({$data.contract_id})">附件信息&nbsp;&nbsp;<i class="glyphicon glyphicon-chevron-down"></i></p>
				<div class="enclosurelist clearfix hides" id="img">


					<!-- 加载动画 -->
					<div class="spiner-example">
						<div class="sk-spinner sk-spinner-three-bounce">
							<div class="sk-bounce1"></div>
							<div class="sk-bounce2"></div>
							<div class="sk-bounce3"></div>
						</div>
					</div>
				</div>
			</div>

			<!--设备信息-->
			<div class="equipment" id="equipment">
				<p class="title">设备信息</p>
				<table class="table">
					<tr>
						<th>装机型号</th>
						<th>设备号</th>
						<th>合同编号</th>
						<th>设备地址</th>
						<th>设备记录</th>
						<th>移机次数</th>
						<th>操作</th>
						<th>备注</th>
					</tr>
					{volist name="$data.equipment" id="eq"}
					<tr>
						<td data-id="{$eq.equipments_number}">{$eq.equipments_name}</td>
						<td data-id="{$eq.equipments_number}">{$eq.equipments_number}</td>
						<td>{$data.contract_no}</td>
						<td>{$eq.equipments_address}</td>
						<td class="relative Operationrecord">
							{if condition="(isset($eq.record) AND !empty($eq.record))"}
							<span>{$eq.equipments_number}设备记录</span>
							<button id="devicedetails" type="button" onclick="openModel({$eq.id},{$eq.equipments_number})">●●●</button>
							<div class="frame" style="width: 200px;">
								<span class="triangle"></span>
								{volist name="$eq.record" id="record"}
								<p>{$eq.equipments_number}设备{$record.type} </p>
								{/volist}
							</div>
							{else /}
							<span></span>
							{/if}
						</td>
						<td>{$eq.moving_machine_number}次</td>
						<td>
							<a href="#" onclick="unBindEquipments({$eq.id},{$data.contract_id})">解绑</a>
							<!--<a onclick="modifyinformation({$eq.id},{$eq.equipments_number})" class="pointer">修改</a>-->
						</td>
						<td class="relative devicedetails">

							<button id="devicedetails" type="button" onmouseover="mouseshow(this)" onmouseout="mousehide(this)" onclick="myModalLabel({$eq.id})">●●●</button>
							{if condition="(isset($eq.Remark) AND !empty($eq.Remark))"}
							<div class="frame" style="width: 200px;">
								<span class="triangle"></span>
									{volist name="$eq.Remark" id="Remark"}
										<p>{$Remark.equipments_remark}</p>
									{/volist}
							</div>
							{else /}
							<div class="frame" style="width: 200px;">
								<span class="triangle"></span>
								<p>暂无备注(点击备注)</p>
							</div>
							{/if}
						</td>
					</tr>
					{/volist}
				</table>
			</div>

			<!--合同修改记录-->
			<div class="operation_record" id="operation_record">
				<p class="title">合同修改记录</p>
				<div class="record_list">
					{volist name="$data.ContractLog" id="ContractLog"}
					<p>{$data.contract_no}合同由{$ContractLog.title}：{$ContractLog.name}&nbsp;{$ContractLog.do_type}&nbsp;{$ContractLog.old_value}&nbsp;{if condition="($ContractLog.do_type == '修改')"}修改为：{/if}{$ContractLog.new_value}<time>{$ContractLog.do_time}</time></p>
					{/volist}
				</div>
				<p id="more" class="title fr pointer" onclick="moreLog({$data.contract_id})">更多&nbsp;&nbsp;<i class="glyphicon glyphicon-chevron-down"></i></p>
			</div>
</div>

	</body>

</html>
<script type="text/javascript">
    //设备记录
    function openModel(id,equipments_number) {
        var html = '';
        html +='<div id="userh">';
        html +='<div class="modal-body">';
        html +='<table class="table table-bordered mt20">';
        html +='<thead>';
        html +='<tr>';
        html +='<th>设备号</th>';
        html +='<th>操作类型</th>';
        html +='<th>操作时间</th>';
        html +='<th>操作地址</th>';
        html +='<th>操作人</th>';
        html +='</tr>';
        html +='</thead>';
        html +='<tbody>';

        html +='<script id="list-template" type="text/html">';
        html +='{{# for(var i=0;i';
        html +='<d.length;i++){ }} <tr>';
        html +='<td>{{d[i].equipments_number}}</td>';
        html +='<td >{{d[i].type}}</td>';
        html +='<td>{{d[i].do_date}}</td>';
        html +='<td>{{d[i].address}}</td>';
        html +='<td>{{d[i].repair_id}}</td>';
        html +='</tr>';
        html +='{{# } }}';
        html +='<\/script>';
        html +='</tbody>';
        html +='<tbody id="list-content"></tbody>';
        html +='</table>';

        html +='<div class="">';
        html +='<div class=" clearfix">';
        html +='<div class="clearfix" style="float:right;margin: 0 auto;">';
        html +='<span class="fl mt5" id="count">共0条数据</span><span id="allpage"  class="fl  mr20 mt5"></span><span  class="fl" id="AjaxPage"></span>';
        html +='</div>';
        html +='<div class="spiner-example">';
        html +='<div class="sk-spinner sk-spinner-three-bounce">';
        html +='<div class="sk-bounce1"></div>';
        html +='<div class="sk-bounce2"></div>';
        html +='<div class="sk-bounce3"></div>';
        html +='</div>';
        html +='</div>';
        html +='</div>';
        html +='</div>';
        html +='</div>';
        html +='<div class="modal-footer t_center">';
        html +='</div>';
        html +='</div>';
        //页面层
        parent.layer.open({
            title:'操作记录详情',
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['823px', '490px'], //宽高
            content: html
        });
        Ajaxpage(1,id,equipments_number);
    }
    function Ajaxpage(curr,id,equipments_number) {
        $.getJSON('{:url("Contractinfo/getEquipmentRecord")}', {page: curr || 1,id:id,equipments_number:equipments_number}, function(data){
            console.log(data);
            parent.$(".spiner-example").css('display', 'none'); //数据加载完关闭动画
            if(data.data == '') {
                parent.$("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
                parent.$('#count').html("共" + data.page.count + "条数据");
            } else {
                var tpl = parent.document.getElementById('list-template').innerHTML;
                parent.laytpl(tpl).render(data.data, function(html) {
                    parent.$('#list-content').html(html);
                    parent.$('#count').html("共" + data.page.count + "条数据");
                });
                parent.laypage({
                    cont: parent.$('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
                    pages: data.page.lastPage, //总页数
                    skip: true, //是否开启跳页
                    skin: '#337ab7', //分页组件颜色
                    curr: curr || 1,
                    first: '首页', //若不显示，设置false即可
                    last: '尾页', //若不显示，设置false即可
                    groups: 3, //连续显示分页数
                    jump: function(obj, first) {
                        if(!first) {
                            Ajaxpage(obj.curr,id,equipments_number)
                        }
                        $('#allpage').html('，第'+ obj.curr +'页，共'+ '<i>'+obj.pages+'</i>' +'页');
						inputlength();
                    }
                });
            }
        });
    }

    //解绑设备
    function unBindEquipments(id,contract_id) {
        console.log(id)
        var html = '<div>';
        html += '<div class="modal-body" style="text-align: center">';
        html += '<p>确认解绑该设备</p>'
        html += '<button type="button" class="btn btn-primary mr20 mt30" onclick="unBind(\'{:url("Contractinfo/unBindEquipments")}\','+id+','+contract_id+',\'admin\')">确认</button>';
        html += '<button type="button" class="btn btn-default mt30" onclick="layuihides()"  style="margin-left: 20px;">取消</button>';
        html += '</div>';
        html += '</div>';
        top.layer.open({
            type: 1,
            title: '解除绑定',
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            area: ['200px', '150px'], //宽高
            shadeClose: true, //开启遮罩关闭
            content: html
        });
    }

	function moreLog(contract_id) {
		$.get("{:url('Contractinfo/getAllContractLog')}",{contract_id:contract_id},function (falg) {
		    var logHtml = '';
			console.log(falg);
			if (falg.code == 1){
			    for (var i= 0 ;i<falg.data.length;i++){

                    logHtml += '<p>{$data.contract_no}合同由'+falg.data[i].title+'：'+falg.data[i].name+'&nbsp;'+falg.data[i].do_type+'&nbsp;';
                    if (falg.data[i].old_value == null){
                        logHtml +=  '';
                    }else {
                        logHtml += falg.data[i].old_value+'&nbsp;'
					}
                    if (falg.data[i].do_type == '修改'){
                        logHtml += '修改为';
                    }
                    logHtml += falg.data[i].new_value+'<time>'+falg.data[i].do_time+'</time></p>';
                }
                $('.record_list').html(logHtml);
                $('#more').remove();
			}

        });
    }
	//顶部导航
	$('.topnav a').click(function() {
		$(this).addClass('ac').siblings('a').removeClass();
	});

	//返回上一页
	function backurl() {
		history.back();
	}
	


	//隐藏合同
	function hideenclosurelist(id) {
		if($('.enclosurelist').css("display") == 'block') {
			$('.enclosurelist').slideUp();
			$('.enclosure .title i').removeClass().addClass('glyphicon glyphicon-chevron-down');
		} else {
			$('.enclosurelist').slideDown();
			$('.enclosure .title i').removeClass().addClass('glyphicon glyphicon-chevron-up');

			//请求图片
            $(".enclosureitem").remove();
			$.get("{:url('Contractinfo/contractImages')}",{id:id},function (data) {
                $(".spiner-example").css('display','none'); //数据加载完关闭动画
				for (var i=0;i<data.data.length;i++){
				    var html = '<div class="enclosureitem">';
				    html += '<img src="{:Config('CONTRACT_IMAGES_PATH')}'+data.data[i]+'" />';
				    html += '</div>';
				    $("#img").append(html);
				}
            });
		}

	};
	
	//鼠标移入移出
	function mousehide(obj) {
		$(obj).next().hide();
	}

	function mouseshow(obj) {
		$(obj).next().show();
	}
	



    //修改设备信息
    function modifyinformation(i,eqnumber) {
	    var equipmentsinfo = {$equipmentsinfo};
        var html = '<div style="padding:15px">';
        html += '<input type="hidden" id="equipments_id_'+i+'" value="'+i+'"/>';
        html+='<p class="pb20 pt5">合同编号:<span>{$data.contract_no}</span></p>';
        html += '<form class="form-inline">';
        html += '<div class="form-group mr10">';
        html += '设备名称<select class="form-control" id="equipments_name_'+i+'">';
        for(var vi=0;vi<equipmentsinfo.length;vi++){
            console.info(equipmentsinfo[vi]);
            html += '<option value="'+equipmentsinfo[vi].equipments_id+'">'+equipmentsinfo[vi].equipments_name+'</option>';
        }
        html += '<select>';
        html += '</div>';
        html += '<div class="form-group">';
        html += '<input type="text" id="equipments_number_'+i+'" maxlength="10" value="'+eqnumber+'" class="form-control" placeholder="输入要修改的设备号">';
        html += '</div>';
        html+='</form>';
        html+='<div style="text-align: center; margin-top: 15px;">'
        html += '<button type="button" class="btn btn-primary mr20" onclick="modifyinformationsuccess(\'{:url("Contractinfo/editEquipments")}\','+i+',{$data.contract_id})">确认</button>';
        html += '<button type="button" class="btn btn-default" onclick="layuihide()"  style="margin-left: 20px;">取消</button>';
        html+='</div>'
        html += '</div>';
        html += '</div>';
        top.layer.open({
            type: 1,
            title: '修改设备信息',
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            area: ['450px', '220px'], //宽高
            shadeClose: true, //开启遮罩关闭
            content: html
        });
    }


    //添加备注
    function myModalLabel(i) {
        var html = '<div>';
        html += '<input id="remark_id_'+i+'" type="hidden" value="'+i+'"/>';
        html += '<div class="modal-body" style="padding: 15px 100px;">';
        html += '<div id="wordCount" class="useDiscountr">';
        html += '<textarea id="remark_'+i+'" class="form-control" rows="8" placeholder="输入某合同的优惠具体时段（例：3月-6月的优惠）"></textarea>';
        html += '<span class="wordwrap">500字以内</span>';
        html += '</div>';
        html += '</div>';
        html += '<div class="modal-footer" style="text-align: center;">';
        html += '<button type="button" class="btn btn-primary mr20" onclick="Addremarksuccess(\'{:url("Contractinfo/addRemark")}\','+i+',{$data.contract_id})">确认</button>';
        html += '<button type="button" class="btn btn-default" onclick="layuihide()"  style="margin-left: 20px;">取消</button>';
        html += '</div>';
        html += '</div>';
        top.layer.open({
            type: 1,
            title: '添加备注',
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            area: ['600px', '330px'], //宽高
            shadeClose: true, //开启遮罩关闭
            content: html
        });
    }





</script>